<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="150px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="筛选会员" prop="keyword">
                <el-input
                  class="w-200"
                  v-model.trim="queryParams.keyword"
                  placeholder="请输入会员姓名或手机号"
                  @keyup.enter.native="handleQuery"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="会员卡号" prop="cardNo">
                <el-input
                  class="w-200"
                  v-model.trim="queryParams.cardNo"
                  placeholder="会员卡号精确匹配"
                ></el-input>
              </el-form-item>
            </el-col> -->

            <!-- <el-col :span="5">
              <el-form-item label="会员类型" prop="customerType">
                <el-select
                  v-model="queryParams.customerType"
                  placeholder="请选择"
                  class="w-200"
                >
                  <el-option
                    v-for="item in ClientType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="5">
              <el-form-item label="会员来源" prop="sourceId">
                <el-select
                  v-model="queryParams.sourceId"
                  placeholder="请选择"
                  class="w-200"
                >
                  <el-option
                    v-for="item in ClientSourceData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  v-model="queryParams.storeId"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.stores"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="扣卡短信验证状态" prop="paySmsOpen">
                <el-select
                  v-model="queryParams.paySmsOpen"
                  placeholder="请选择"
                  filterable
                  class="w-160"
                >
                  <el-option
                    v-for="item in paySmsOpenOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <!-- <div class="CutTab">
      <div class="cutTabbox">
        <div
          @click="CutTabs(0, 'S')"
          :class="ActiveIndex === 0 ? 'active' : ''"
        >
          门店会员
        </div>
        <div
          @click="CutTabs(1, 'U')"
          :class="ActiveIndex === 1 ? 'active' : ''"
        >
          门店可用会员
        </div>
        <div
          @click="CutTabs(2, 'A')"
          :class="ActiveIndex === 2 ? 'active' : ''"
        >
          所有会员
        </div>
      </div>
    </div> -->

    <!-- 所有列表 -->
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">所有会员列表</div>

        <div v-hasPermi="['store:sms:sms:temp:refresh']" class="smsBox">
          <div style="width: 80px; margin-left: 10px">
            <el-input v-model.trim="smsValue" disabled></el-input>
          </div>
          <div style="margin-left: 10px">
            <el-button type="primary" @click="SmsTempRefresh">刷新</el-button>
          </div>
        </div>
        <div class="op_right">
          <button
            class="primary_button"
            @click="NewmemberUser"
            v-hasPermi="['customer:member:add:temp']"
          >
            新增会员
          </button>
        </div>
      </div>

      <div class="table_list">
        <el-table
          :data="tableList"
          stripe
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="date" label="会员名称" width="300">
            <template slot-scope="scope">
              <div @click="MemberUserInfo(scope.row)" class="clients">
                <div class="client_name">{{ scope.row.name }}</div>
                <div>
                  <i class="el-icon-phone"></i>
                  <span>{{
                    scope.row.mobile.replace(
                      /^(.{3})(?:\d+)(.{4})$/,
                      "$1****$2"
                    )
                  }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="totalBalance" label="会员余额（元）">
          </el-table-column>
          <el-table-column prop="customerType" label="会员类型">
            <template slot-scope="scope">
              <el-tag type="success">{{
                customerTypeObj[scope.row.customerType]
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sourceName" label="会员来源">
          </el-table-column>
          <el-table-column prop="days" label="上次消费">
            <!-- <template>
               {{ scope.row.days }}
            </template> -->
          </el-table-column>
          <el-table-column prop="createTime" label="登记时间">
          </el-table-column>
          <el-table-column prop="paySmsOpen" label="扣卡短信验证">
            <template slot-scope="scope">
              <div class="switch-style" @click="handleStatusChange(scope.row)">
                <el-switch
                  v-model="scope.row.paySmsOpen"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="Y"
                  inactive-value="N"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="Edit(scope.row)"
                v-hasPermi="['customer:member:edit']"
                >编辑</el-button
              >

              <el-button
                size="mini"
                v-if="scope.row.customerHide === 'Y'"
                type="text"
                @click="close(scope.row, '显示')"
                v-hasPermi="['customer:member:hide']"
                >显示会员</el-button
              >

              <el-button
                size="mini"
                type="text"
                v-if="scope.row.customerHide === 'N'"
                @click="close(scope.row, '隐藏')"
                v-hasPermi="['customer:member:hide']"
                >隐藏会员</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-if="scope.row.customerHide === 'N'"
                @click="DeleteMember(scope.row)"
                v-hasPermi="['customer:member:delete']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getLists"
        />
      </div>

      <!-- 转账 -->
      <el-dialog
        title="转账"
        :visible.sync="dialogVisible"
        width="650px"
        :before-close="CanclehandleClose"
      >
        <span>
          <el-form
            :model="TransferForm"
            :rules="TransferRules"
            ref="TransferForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="转入会员" prop="custoerInName">
                  <el-input
                    type="text"
                    v-model="TransferForm.custoerInName"
                    placeholder="请选择转入会员"
                    @focus="CusterIn"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="转出会员" prop="custoerOutName">
                  <el-input
                    type="text"
                    v-model="TransferForm.custoerOutName"
                    placeholder="请选择转出会员"
                    @focus="CusterOut"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="转入会员卡" prop="cardIdIn">
                  <el-select
                    v-model="TransferForm.cardIdIn"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in MemberCardLists"
                      :key="item.id"
                      :label="item.cardNumber"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="转出会员卡" prop="cardIdOut">
                  <el-select
                    v-model="TransferForm.cardIdOut"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in MemberCardList"
                      :key="item.id"
                      :label="item.cardNumber"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="密码" prop="cardOutPassword">
                  <el-input
                    type="text"
                    placeholder="请输入转出会员卡密码"
                    v-model="TransferForm.cardOutPassword"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="备注" prop="name">
                  <el-input
                    type="textarea"
                    placeholder="请输入备注"
                    v-model="TransferForm.reason"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CanclehandleClose">取 消</el-button>
          <el-button type="primary" @click="sureTransfer">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 选择会员 -->
      <el-dialog
        title="选择会员"
        :visible.sync="pickClientItemVis"
        width="900px"
        @close="pickClientItemCancle"
      >
        <div class="pick-clien-style">
          <div class="pick-client-head">
            <div class="input-left">
              <el-input
                class="w-100"
                v-model.trim="useStoreParams.keyword"
                placeholder="请输入会员姓名"
              ></el-input>
              <div class="but">
                <el-button type="primary" @click="handleCkientQuery"
                  >搜索</el-button
                >
              </div>
            </div>
            <!-- <div class="input-add">
              <el-button type="primary" @click="hanldeAddClient"
                >新建会员</el-button
              >
            </div> -->
          </div>

          <div class="pick-clent-center">
            <div class="table-head">
              <div>会员名称</div>
            </div>
            <div class="pick-item-list" v-loading="clinetLoading">
              <el-radio-group v-model="pickClientItemObj.custId" class="w-100">
                <div
                  class="pick-item-style"
                  v-for="item in CusterList"
                  :key="item.id"
                >
                  <div class="pick-item-center">
                    <el-radio :label="item.id"
                      ><span class="f-zero">{{ item.name }}</span></el-radio
                    >
                    <div class="user-style">
                      <div class="hover_style user-name">{{ item.name }}</div>
                      <div class="span_small">
                        <i class="el-icon-phone"></i>{{ item.mobile }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-radio-group>
            </div>

            <div class="text-right">
              <pagination
                :total="total1"
                :page.sync="useStoreParams.pageNo"
                :limit.sync="useStoreParams.pageSize"
                @pagination="ClientsPage"
              />
            </div>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="pickClientItemCancle">取消</el-button>
          <el-button
            type="primary"
            :loading="pickClientItemLoading"
            @click="pickClientItemSave"
            >确认</el-button
          >
        </div>
      </el-dialog>

      <!-- 修改会员信息 -->
      <el-dialog
        title="修改会员信息"
        :visible.sync="updateUsersInfo"
        width="30%"
        :before-close="updateUserInfoClose"
      >
        <span>
          <div>
            <el-form
              ref="UpdateUserForm"
              :rules="UpdateUserRules"
              :model="UpdateUserForm"
            >
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="会员名称" prop="name">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="UpdateUserForm.name"
                      placeholder="请输入会员名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="手机号" prop="mobile">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="UpdateUserForm.mobile"
                      placeholder="请输入手机号"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateUserInfoClose">取 消</el-button>
          <el-button type="primary" @click="UpdateUserSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <client-info
        ref="clientInfo"
        @childEvent="handleChildEvent"
      ></client-info>
    </div>
  </div>
</template>

<script>
import {
  getClientList,
  getClientSourceList,
  getStoreClientList,
  getAvailableClientList,
  transferCard,
  updateMemberUser,
  HideCustomer,
  PayOpen,
  deleteMemberData,
  getSmsTemp,
  getSmsTempRefresh,
} from "@/api/business/client";
import { getMemberCard } from "@/api/business/BusinessIndex";
import { capitalAmount } from "@/utils/utils";
import { mapGetters } from "vuex";
import { phoneTest } from "@/utils/regular";
import ClientInfo from "@/components/ClientInfo/clientInfo.vue";
import { CommonStatusEnum } from "@/utils/constants";

export default {
  name: "Storeadminclientlist",
  components: {
    ClientInfo,
  },
  data() {
    return {
      smsValue: "", // 万能验证码
      // userPermissions: ["customer:member:add:temp"], // 当前用户的权限列表
      updateUsersInfo: false,
      UpdateUserForm: {
        name: "",
        mobile: "",
      },
      UpdateUserRules: {
        name: [
          { required: true, message: "请输入会员名称", trigger: "change" },
        ],
        mobile: [
          { required: true, message: "请输入会员手机号" },
          {
            validator: this.checkPhone,
            trigger: "blur",
          },
        ],
      },

      paySmsOpenOptions: [
        {
          label: "开启",
          value: "Y",
        },
        {
          label: "禁用",
          value: "N",
        },
      ],

      value: "",
      options: [],
      TransferLoading: false,
      TransferForm: {
        custoerInName: "",
        custoerOutName: "",
        cardIdIn: "",
        cardIdOut: "",
        cardOutPassword: "",
        reason: "",
      },
      // ActiveIndex: 0,
      loading: false,
      dialogVisible: false, // 转账

      ClientSourceData: [], // 会员来源数据
      ClientOptions: [], // 会员列表

      // 选择会员
      pickClientItemVis: false,
      pickClientType: "",
      pickClientItemLoading: false,
      pickClientItemObj: {
        keyword: "",
        orderId: "",
        custId: "",
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      clinetLoading: false,
      clinetArry: [],
      clinetArryObj: {},

      useStoreParams: {
        pageNo: 1,
        pageSize: 10,
        keyword: "",
      },

      // 会员类型
      customerTypeObj: {
        1: "散客",
        2: "会员",
      },

      ClientType: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "散客",
        },
        {
          value: 2,
          label: "会员",
        },
      ],
      value: "",
      // 查询参数
      queryParams: {
        customerType: null, // 会员类型 1普通账户，即散客 2会员卡账户，即会员.
        // mobile: "", // 手机号
        sourceId: "", // 会员来源
        pageNo: 1,
        pageSize: 10,
        userName: "",
        keyword: "",
        // cardNo: "",
      },

      tableList: [],
      tableObj: {},
      total: 0,
      total1: 0,

      payWayOpention: [
        {
          label: "微信",
          value: 1,
        },
        {
          label: "支付宝",
          value: 2,
        },
        {
          label: "银行卡",
          value: 3,
        },
        {
          label: "现金",
          value: 4,
        },
      ],

      queryType: "",

      TransferRules: {
        cardIdIn: [
          { required: true, message: "请选择转入会员卡", trigger: "change" },
        ],
        cardIdOut: [
          { required: true, message: "请选择转出会员卡", trigger: "change" },
        ],
        cardOutPassword: [
          {
            required: true,
            message: "请输入转出会员卡密码",
            trigger: "change",
          },
        ],
      },

      clinerCardLoading: false,
      MemberCardList: [], // 转出
      MemberCardLists: [], // 转入

      Custerloading: false,
      CusterList: [],
      CusterObj: {},
    };
  },

  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    // this.CutTabs(0, "S");
    this.getClientSource();
    this.getLists();
    this.getSmsTempData();
  },

  mounted() {
    document.addEventListener("paste", function (e) {
      if (e.target.offsetParent.classList.contains("pwd")) {
        e.preventDefault();
      }
    });
  },

  methods: {
    // 刷新
    SmsTempRefresh() {
      getSmsTempRefresh({})
        .then((Res) => {
          console.log(Res, "刷新");
          this.getSmsTempData();
        })
        .catch((err) => {});
    },
    getSmsTempData() {
      getSmsTemp({})
        .then((res) => {
          console.log(res, "万能验证码");
          this.smsValue = res.data;
        })
        .catch((err) => {});
    },
    DeleteMember(row) {
      let id = row.id;
      this.$confirm("确定要删除该会员吗, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMemberData({ id: id })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getLists();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },

    // 扣卡短信验证
    handleStatusChange(row) {
      const that = this;
      let text = row.paySmsOpen === "Y" ? "关闭" : "开启";
      this.$modal
        .confirm("确认要" + text + "短信验证吗?")
        .then(function () {
          PayOpen({ id: row.id }).then(() => {
            that.getLists();
          });
        })
        .catch(() => {});
    },

    close(row, closeState) {
      this.$confirm("确认要" + closeState + "该客户吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          HideCustomer({ id: row.id }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getLists();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
          });
        })
        .catch(() => {});
    },

    // hasPermission(permission) {
    //   // 判断当前用户是否拥有指定权限
    //   return this.userPermissions.includes(permission);
    // },

    handleChildEvent(dataFromChild) {
      // 接收子组件发送的事件并调用相应的方法
      this.handleQuery();
    },
    // onEnter() {
    //   console.log("lxuu");
    //   // 当用户在输入框按下回车键时，触发按钮的点击事件
    //   this.handleQuery();
    // },
    checkPhone(rule, value, callback) {
      if (!phoneTest(value) && !!value) {
        callback(new Error("请输入正确手机号格式"));
      } else {
        callback();
      }
    },
    // 编辑会员信息
    Edit(row) {
      this.updateUsersInfo = true;
      this.UpdateUserForm.name = row.name;
      this.UpdateUserForm.mobile = row.mobile;
      this.UpdateUserForm.id = row.id;
    },

    updateUserInfoClose() {
      this.updateUsersInfo = false;
      this.$nextTick(() => {
        this.resetFormData("UpdateUserForm");
      });
    },
    UpdateUserSubmit() {
      this.$refs["UpdateUserForm"].validate((valid) => {
        if (valid) {
          updateMemberUser({
            name: this.UpdateUserForm.name,
            mobile: this.UpdateUserForm.mobile,
            id: this.UpdateUserForm.id,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });

                this.getLists();
                this.updateUserInfoClose();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 转出会员卡 可用会员
    getClinerCards(custId) {
      this.clinerCardLoading = true;
      getMemberCard({ customerId: custId, queryType: "U", cardType: "M" })
        .then((res) => {
          this.clinerCardLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.MemberCardList = data;
          }
        })
        .catch((err) => {
          this.clinerCardLoading = false;
        });
    },

    // 转入会员卡 门店会员
    getClinerCard(custId) {
      this.clinerCardLoading = true;
      getMemberCard({ customerId: custId, queryType: "S", cardType: "M" })
        .then((res) => {
          this.clinerCardLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.MemberCardLists = data;
          }
        })
        .catch((err) => {
          this.clinerCardLoading = false;
        });
    },

    // 转入会员
    CusterIn() {
      this.pickClientItemVis = true;
      this.pickClientType = "1";
      // this.getStoreClientLists();
      this.CusterInList();
    },

    // 转出会员
    CusterOut() {
      this.pickClientItemVis = true;
      this.pickClientType = "2";
      this.CusterOutList();
    },

    // 转入 会员列表
    CusterInList() {
      this.Custerloading = true;
      getStoreClientList(this.useStoreParams)
        .then((res) => {
          console.log(res);
          this.Custerloading = false;
          const { code, data } = res;
          if (code === 0) {
            this.setClientObj(data);
          }
        })
        .catch((err) => {
          this.Custerloading = false;
        });
    },

    // 转出 会员列表
    CusterOutList() {
      this.Custerloading = true;
      getAvailableClientList(this.useStoreParams)
        .then((res) => {
          // console.log(res);
          this.Custerloading = false;
          const { code, data } = res;
          if (code === 0) {
            this.setClientObj(data);
          }
        })
        .catch((err) => {
          this.Custerloading = false;
        });
    },

    setClientObj(data) {
      this.CusterList = data.list;
      let CusterObj = {};
      for (let index = 0; index < data.list.length; index++) {
        const element = data.list[index];
        CusterObj[element.id] = element;
      }
      this.CusterObj = CusterObj;
      this.total1 = data.total;
    },

    handleCkientQuery() {
      this.useStoreParams.pageNo = 1;
      this.ClientsPage();
    },

    ClientsPage() {
      if (this.pickClientType === "1") {
        this.CusterInList();
      } else if (this.pickClientType === "2") {
        this.CusterOutList();
      }
    },

    hanldeAddClient() {
      this.$refs.newClient.open();
    },

    pickClientItemCancle() {
      this.pickClientItemObj = {
        custName: "",
        orderId: "",
        custId: "",
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      this.useStoreParams.keyword = "";
      this.$nextTick(() => {
        this.pickClientItemVis = false;
        this.pickClientItemLoading = false;
        this.pickClientType = "";
      });
    },

    pickClientItemSave() {
      if (!this.pickClientItemObj.custId) {
        this.$message.warning("请选择会员");
        return false;
      }

      let clientObj = this.CusterObj[this.pickClientItemObj.custId];

      // console.log("aaa",clientObj,this.pickClientType);
      if (this.pickClientType === "1") {
        this.TransferForm.custoerIn = this.pickClientItemObj.custId;
        this.TransferForm.custoerInName = clientObj.name;
        this.getClinerCard(this.TransferForm.custoerIn);
      } else if (this.pickClientType === "2") {
        this.TransferForm.custoerOut = this.pickClientItemObj.custId;
        this.TransferForm.custoerOutName = clientObj.name;
        this.getClinerCards(this.TransferForm.custoerOut);
      }
      this.pickClientItemCancle();
    },

    // CutTabs(i, queryType) {
    //   this.queryType = queryType;
    //   this.ActiveIndex = i;
    //   this.getClient();
    // },

    // getClient() {
    //   this.tableList = [];
    //   this.queryParams.pageNo = 1;

    //   this.getPage();
    // },

    // getPage() {
    //   let i = this.ActiveIndex;
    //   if (i === 0) {
    //     this.getStoreClientLists();
    //   } else if (i === 1) {
    //     this.getAvailableClientLists();
    //   } else if (i === 2) {
    //     this.getLists();
    //   }
    // },

    // 会员列表 所有
    getLists() {
      this.loading = true;
      getClientList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            let tableObj = {};
            for (let index = 0; index < data.list.length; index++) {
              const element = data.list[index];
              tableObj[element.id] = element;
            }
            this.tableObj = tableObj;
            this.tableList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 会员档案-门店会员(本门店)
    getStoreClientLists() {
      this.loading = true;
      getStoreClientList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0 && this.ActiveIndex === 0) {
            let tableObj = {};
            for (let index = 0; index < data.list.length; index++) {
              const element = data.list[index];
              tableObj[element.id] = element;
            }
            this.tableObj = tableObj;
            this.tableList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 会员档案-门店可用会员
    getAvailableClientLists() {
      this.loading = true;
      getAvailableClientList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0 && this.ActiveIndex === 1) {
            this.tableList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    getClientSource() {
      getClientSourceList().then((res) => {
        const { code, data } = res;
        if (code === 0) {
          this.ClientSourceData = data;
        }
      });
    },

    MemberUserInfo(row) {
      this.$nextTick(() => {
        this.$refs.clientInfo.MemberUserInfo(row, this.queryType);
      });
    },

    RechargeCard() {
      this.$nextTick(() => {
        this.$refs.clientInfo.RechargeCard();
      });
    },

    NewmemberUser() {
      this.$nextTick(() => {
        this.$refs.clientInfo.NewmemberUser();
      });
    },

    // 转账
    Transfer() {
      this.dialogVisible = true;
    },

    sureTransfer() {
      this.TransferLoading = true;
      this.$refs["TransferForm"].validate((valid) => {
        if (valid) {
          transferCard(this.TransferForm)
            .then((res) => {
              this.TransferLoading = false;
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.CanclehandleClose();
                this.getStoreClientLists();
              }
            })
            .catch((err) => {
              this.TransferLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    CanclehandleClose() {
      this.resetForm("TransferForm");
      this.$nextTick(() => {
        this.dialogVisible = false;
      });
    },

    // 筛选
    handleQuery() {
      // this.getClient();
      this.getLists();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
      // this.getClient();
      this.getLists();
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.CutTab {
  .cutTabbox {
    margin-right: 24px;
    display: flex;
    background-color: #fff;
    margin-left: 24px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    div {
      width: 100px;
      text-align: center;
      &.active {
        color: #0052d9;
      }
    }
  }
}
.pick-clien-style {
  .pick-client-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .input-left {
      width: 300px;
      position: relative;
      padding-right: 80px;
      .but {
        position: absolute;
        top: 0px;
        right: 0px;
      }
    }
  }

  .table-head {
    padding-left: 80px;
    height: 48px;
    background-color: #f7f8fa;
    line-height: 48px;
    font-size: 12px;
  }

  .pick-item-list {
    max-height: 500px;
    overflow-y: auto;
    .pick-item-style {
      border-bottom: solid 1px #f2f2f2;
      padding: 20px 0px 20px 36px;
    }
    .pick-item-center {
      width: 100%;
      display: flex;
      align-items: center;

      .user-style {
        font-size: 14px;

        .user-name {
          color: #3b98fe;
        }

        .span_small {
          font-size: 12px;
          color: #999999;
          margin-top: 8px;
        }
      }
    }
  }
}

.f-zero {
  font-size: 0px;
}
.table_list {
  .clients {
    cursor: pointer;
  }
}

.switch-style {
  display: inline-block;
  position: relative;
  &::before {
    position: absolute;
    width: 100%;
    content: "";
    height: 100%;
    z-index: 2;
    cursor: pointer;
  }
}

.client_name {
  color: #1890ff;
}

.smsBox {
  display: flex;
}
</style>
